<template>
    <view class="container">
        <unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" :options="options"
            collection="opendb-feedback" field="content,imgs,contact,mobile" :where="queryWhere" :getone="true"
            :manual="true">
            <view v-if="error">{{error.message}}</view>
            <view v-else-if="loading">
                <uni-load-more :contentText="loadMore" status="loading"></uni-load-more>
            </view>
            <view v-else-if="data">
                <view>
                    <text>留言内容/回复内容</text>
                    <text>{{data.content}}</text>
                </view>
                <view>
                    <text>图片列表</text>
                    <template v-for="(file, j) in data.imgs">
                        <uni-file-picker v-if="file.fileType == 'image'" :value="file" :file-mediatype="file.fileType"
                            return-type="object" readonly></uni-file-picker>
                        <uni-link v-else :href="file.url" :text="file.url"></uni-link>
                    </template>
                </view>
                <view>
                    <text>联系人</text>
                    <text>{{data.contact}}</text>
                </view>
                <view>
                    <text>联系电话</text>
                    <text>{{data.mobile}}</text>
                </view>
            </view>
        </unicloud-db>
        <view class="flex jcse mgt20" v-if="uniIDHasRole('webmaster') || uniIDHasRole('admin')">
            <van-button type="primary" @click="handleUpdate">修改</van-button>
            <van-button type="danger" @click="handleDelete">删除</van-button>
        </view>
    </view>
</template>

<script>
    // 由schema2code生成，包含校验规则和enum静态数据
    import {
        enumConverter
    } from '../../js_sdk/validator/opendb-feedback.js';

    export default {
        data() {
            return {
                queryWhere: '',
                loadMore: {
                    contentdown: '',
                    contentrefresh: '',
                    contentnomore: ''
                },
                options: {
                    // 将scheme enum 属性静态数据中的value转成text
                    ...enumConverter
                }
            }
        },
        onLoad(e) {
            this._id = e.id
        },
        onReady() {
            if (this._id) {
                this.queryWhere = '_id=="' + this._id + '"'
            }
        },
        methods: {
            handleUpdate() {
                // 打开修改页面
                uni.navigateTo({
                    url: './edit?id=' + this._id,
                    events: {
                        // 监听修改页面成功修改数据后, 刷新当前页面数据
                        refreshData: () => {
                            this.$refs.udb.loadData({
                                clear: true
                            })
                        }
                    }
                })
            },
            handleDelete() {
                this.$refs.udb.remove(this._id, {
                    success: (res) => {
                        // 删除数据成功后跳转到list页面
                        uni.navigateTo({
                            url: './list'
                        })
                    }
                })
            }
        }
    }
</script>

<style>
    .container {
        padding: 10px;
    }

    .btns {
        margin-top: 10px;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: row;
    }

    .btns button {
        flex: 1;
    }

    .btn-delete {
        margin-left: 10px;
    }
</style>